<template>
	<view class="container-root">
			<!-- <view > -->
			
			<!-- <view v-if='shoppingCarts'> -->
				<checkbox-group class="carts-group" @change='checkboxChange'>
					<label class="carts-item-layout" v-for='(item, index) in productList' :key='index'>
						<view class="item-layout-check">
							<checkbox :value="index" :checked="checkboxPostions[index]"></checkbox>
						</view>	
						<view class="carts-item-click" @click="onClickItem(index)">
							<view class="item-layout-img">
								<image class="carts-image" v-if="item.imgLoaded" :src ="getImagUlr(item.imageUrl)" mode="scaleToFill"></image>
								<image class="carts-image" v-if="!item.imgLoaded" src="/static/images/load_fial_image.png" mode="scaleToFill" ></image>
							</view>
							<view class="item-layout-right">
								<view class='carts-title'>{{item.productName}}</view>						
								<view class='carts-hint'>{{item.description}}</view>
								<view class='carts-price-layout'>
									<view class='carts-price-item'>
										<view class='carts-price-type'>主机</view>	￥{{item.pricePerMonth}}/月
									</view>
									<view v-if='userType === "0"' class='carts-price-item' style='margin-left:20rpx;'>
										<view class='carts-price-type'>副机</view>	￥{{item.subPricePerMonth}}/月
									</view>
								</view>
							</view>
						</view>					
					</label>
				</checkbox-group>
				
				<view class="carts-submit-layer">
					<label class='carts-all-checked' @tap="onClickAllChecked">
						<checkbox value="index" :checked="allChecked">全选</checkbox>
					</label>
					<view class='carts-total-layout'>
					    <text>合计：</text>
					    <text class='carts-count-total'>{{productTotal}}</text>
					</view>
					<button class='carts-button-submit' hover-class='carts-button-submit-hover' @tap='deleteProductClick'>删除</button>
					<button class='carts-button-submit' hover-class='carts-button-submit-hover' @tap='settlement'>结算</button>
				</view>
			<!-- </view> -->
			<!-- </view> -->
			<!-- <view v-if= "!shoppingCarts" class='empty-hint'>
			  <image class='carts-image' src='/static/images/shopping_cart_nol.png'></image>
			  <text>购物车空空如也~</text>
			</view> -->
		</view>
</template>

<script>
	import {
		mapState
	} from 'vuex' 
	import httpRequest from '@/utils/utilHttp.js'
	
	export default {
		data() {
			return {
				productList:[],
				productImages:{},
				shoppingCarts: null, // 购物车的数据源
				checkboxPostions: [], // checkbox的位置信息
				allChecked: false, //是否全选
				productTotal: 0, // 选中的商品数
				userType:''
			}
		},
		onLoad() {
			console.log('buy-car loading...')
			var that = this;
			that.userType = that.userInfo.userType;
			var shoppingCarts = uni.getStorageSync('shoppingCart')
			that.shoppingCarts = shoppingCarts;
			if(shoppingCarts)
			{
				that.productList = shoppingCarts
				for(var i = 0; i<that.productList.length; i++)
				{
					that.productList[i].imgLoaded = that.getFirstImagUlr(that.productList[i].imageUrl);
				}
				console.log('have shopCarts');
				console.log(shoppingCarts.length)
			}
			else{
				console.log('have no shopCarts');
			}
			
			console.log(that.userType)			
		},
		onReady(){
			this.onClickAllChecked()
		},
		computed: {
			...mapState(['userInfo']), //对全局变量进行监控
		},
		methods: {
			getFirstImagUlr(icon){
				console.log('图片下载')
				var self = this;
				var iconObj={path:'',loaded:false};
				iconObj.path = '/static/images/load_fial_image.png'; 
				iconObj.loaded = false;
				
				var tempImagePath = uni.getStorageSync('tempImagePath');
				if (tempImagePath && tempImagePath[icon]) {
					iconObj.path = tempImagePath[icon];
					iconObj.loaded = true;										
				} 
				else {
					let options = {
						url:httpRequest.requestUrl.imageUrl + icon						
					};
					
					httpRequest.DownloadFile(options).then(res => {						
						if(res.statusCode == 200){							
							var tempImagePath = uni.getStorageSync('tempImagePath');
							if (tempImagePath && tempImagePath[icon]) {								
								iconObj.path = tempImagePath[icon];
								iconObj.loaded = true;	
								for(var i=0; i< self.productList.length; i++){
									if(self.productList[i].imageUrl == icon){
										self.productList[i].imgLoaded = true;										
										break;
									}
								}																	
							}							
						}						
					})
				}
				if(!self.productImages[icon])
				{
					self.productImages[icon] = iconObj;
				}
				if(self.productImages[icon].path != iconObj.path)
				{
					self.productImages[icon].path = iconObj.path;
				}
				if(self.productImages[icon].loaded != iconObj.loaded)
				{
					self.productImages[icon].loaded = iconObj.loaded;
				}
				return self.productImages[icon].loaded;
			},
			getImagUlr(icon){
				var self = this;
				var iconObj={path:'',loaded:false};
				iconObj.path = '/static/images/load_fial_image.png'; 
				iconObj.loaded = false;
				var tempImagePath = uni.getStorageSync('tempImagePath');
				if (tempImagePath && tempImagePath[icon]) {
					iconObj.path = tempImagePath[icon];
					iconObj.loaded = true;
				}
				if(!self.productImages[icon])
				{
					self.productImages[icon] = iconObj;
				}	
				return self.productImages[icon].path;
			},
			checkboxChange: function (e) {
				var that = this;
				var checkboxPostions = []
				var allChecked = false
				var checkedPostions = e.detail.value
				console.log(checkedPostions)
				for (var i = 0; i < checkedPostions.length; i++) {
				    checkboxPostions[parseInt(checkedPostions[i])] = true
				}
				if (checkedPostions.length === that.productList.length) // 是否
				{
					allChecked = true;
				}
						
				that.productTotal = checkedPostions.length;
				that.checkboxPostions = checkboxPostions;
				that.allChecked = allChecked;
			},
			onClickItem(index){
				uni.navigateTo({
				      url: '/pages/businessDetails/businessDetails?productData=' + JSON.stringify(this.productList[index]) + "&isBuy=true",
				})
			},
			onClickAllChecked: function(e) {
				var that = this;
				var checkboxPostions = []
				var productTotal = that.productTotal
				
				if (!that.shoppingCarts) { // shoppingCarts无数据
				    productTotal = 0	
				} 
				else {
					for (var i = 0; i < that.productList.length; i++) {
						checkboxPostions.push(!that.allChecked)
					}
					productTotal = !that.allChecked ? that.productList.length : 0
				}
				
				that.checkboxPostions = checkboxPostions;
				that.allChecked = !that.allChecked;
				that.productTotal = productTotal;
			},	
			deleteProductClick(){
				var that = this
				var checkboxPostions = that.checkboxPostions
				if (checkboxPostions.length <= 0) {
				  uni.showToast({
					title: '请选择至少一件商品进行删除',
					icon: 'none'
				  })
				  return
				}
				
				uni.showModal({
					icon:'none',
					title:'删除购物车产品!',
					// showCancel: false,
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							var shoppingCarts = that.shoppingCarts
							var checkboxPostions = that.checkboxPostions
							
							if (that.allChecked) { // 全选
							    shoppingCarts = null
							} 
							else {
							    for (var i = 0; i < checkboxPostions.length; i++) {
							        if (checkboxPostions[i]) {
										shoppingCarts.splice(i, 1)
							        }
							    }
							}
							that.shoppingCarts = shoppingCarts;
							that.allChecked = false;
							that.productTotal = 0;
							that.checkboxPostions = [];
							that.productList = shoppingCarts;
							uni.setStorageSync('shoppingCart', shoppingCarts)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			settlement(){
				var that = this;
				var shoppingCarts = that.shoppingCarts
				var checkboxPostions = that.checkboxPostions
				if (checkboxPostions.length <= 0) {
					uni.showToast({
						title: '请选择至少一件商品进行结算~',
						icon: 'none'
					})
					return
				}
				var productData = new Array();				
				for (var i = 0; i < checkboxPostions.length; i++) {
					if (checkboxPostions[i]) {
						productData.push(that.productList[i])
						console.log(that.productList[i])
					}
				}
				console.log(productData)
			
				uni.navigateTo({
				  url: '/pages/ensureorder/ensureorder?productDatas=' + JSON.stringify(productData),
				})
			}								
		}
	}
</script>

<style scoped>
	.empty-hint{
		 position: fixed;
		  top: 25%;
		  width: 100%;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-items: center;
		  color: #333;
		  font-size: 32rpx;
	}
	.carts-image{
		width: 200rpx;
		height: 200rpx;
	}
	.carts-group{
		/* //width: 100%; */
		width: calc(100% - 40rpx);
	}
	.carts-item-layout{
		width: 100%;
		height: 180rpx;
		display: flex;
		flex-direction: row;
		align-items: center;		
		background-color: white;
	}
	.item-layout-check{
		width: 60rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 4rpx;
	}
	.carts-item-click{
		display: flex;
		flex-direction: row;
		align-items: center;		
		background-color: white;
	}
	.item-layout-image{
		width: 220rpx;
		height: 160rpx;
		display: flex;
		align-items: center;
	}
	.carts-image{
		width: 220rpx;
		height: 160rpx;
	}
	.item-layout-right{
		flex: 1;
		height:calc(100%  - 40rpx);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		padding: 20rpx 0rpx 20rpx 0rpx;
	}
	.carts-title{
		font-weight: bold;
	}
	.carts-hint {
		font-size: 24rpx;
		color: #999;
		margin: 20rpx 0rpx 20rpx 0rpx;
	}
	.carts-price-layout{
		display: flex;
		flex-direction: row;
		color: red;
		font-size: 28rpx;
	}
	.carts-price-item{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: flex-end;
	}
	.carts-price-type{
		background-color: #00b9ef;
		color: white;
		font-size: 20rpx;
		padding: 2rpx;
		border-radius: 5rpx;
	}
	.carts-submit-layer{
		position: fixed;
		bottom: 0rpx;
		height: 100rpx;
		width: 100%;
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.carts-all-checked{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 20rpx;
	}
	.carts-count-total{
		padding-right: 20rpx;
		font-weight: bold;
		font-size: 36rpx;
	}
	.carts-total-layout{
		flex: 4;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.carts-button-submit{
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		color: white;
		background-color: red;
		border-radius: 0px;
		border-left: 1rpx solid white;
	}
	.carts-button-submit::after {
	  border: none;
	}
	.carts-button-submit-hover{
	  background-color: #DC143C;
	}
</style>
